<template>
  <div>
    <div class="t4_r_top t4_border" style="height: auto">
      <div class="t4_r_sjCons">
        <!-- 目录列表 -->
        <div class="t4_sjCons" style="display: block">
          <div class="t2_sjCons_list t2_result_list_r2">
            <h2 class="titBox">
              <a><img src="@/assets/images/link.png" style="padding: 0 8px; height: 24px" />{{ zyflInfoInfo.name }}</a>
              <!--              <div class="sqBtn">-->
              <!--                <el-button-->
              <!--                  plain-->
              <!--                  size="small"-->
              <!--                  @click="approvalBtnClick"-->
              <!--                  v-if="dataInfo.apply == 0"-->
              <!--                  >申&nbsp;请</el-button-->
              <!--                >-->
              <!--              </div>-->

            </h2>
            <div class="zyInfoBox">
              <div class="zyInfo">
                <div>资源分类：{{ zyflInfoInfo.meunName }}</div>
                <div class="infoItem_box">
                  <div class="infoItem">
                    <div>资源提供方：{{ zyflInfoInfo.xxzytgf }}</div>
                    <div>
                      共享类型：{{ zyflInfoInfo.gxtype }}
                    </div>
                  </div>
                  <div class="infoItem">
                    <div>创建时间：{{ zyflInfoInfo.createTime }}</div>
                    <div>
                      共享条件：{{
                        zyflInfoInfo.gxtj ? zyflInfoInfo.gxtj : '无'
                      }}
                    </div>
                  </div>
                  <div class="infoItem">
                    <!-- <div>更新日期：{{ dataInfo.createTime }}</div> -->
                    <div>
                      更新周期：{{
                        zyflInfoInfo.frequency
                      }}
                    </div>
                    <!--                            <div>共享方式：<span class="gxfs" v-html="initInfo(item.shareMethod,'ShareMode')"></span></div>-->
                  </div>
                  <div class="infoItem">
                    <div>资源类型：{{ '服务资源' }}</div>
                    <!--                    <div>-->
                    <!--                      共享方式：-->
                    <!--                      <div-->
                    <!--                        class="imgBox"-->
                    <!--                        v-for="(param, index) in initInfo(-->
                    <!--                          dataInfo.shareMethod,-->
                    <!--                          'ShareMode'-->
                    <!--                        )"-->
                    <!--                        :key="index"-->
                    <!--                      >-->
                    <!--                        <el-tooltip-->
                    <!--                          class="item"-->
                    <!--                          effect="dark"-->
                    <!--                          :content="param.name"-->
                    <!--                          placement="top"-->
                    <!--                        >-->
                    <!--                          <img-->
                    <!--                            :class="param.code == 0 ? 'sqlImg' : ''"-->
                    <!--                            :src="param.src"-->
                    <!--                            alt=""-->
                    <!--                          />-->
                    <!--                        </el-tooltip>-->
                    <!--                      </div>-->
                    <!--                    </div>-->
                  </div>
                </div>
              </div>
              <div class="imageBox" v-if="dataInfo.apply == 1">
                <img src="../../assets/images/dsp.png" alt="" v-if="dataInfo.auth == 0" />
                <img src="../../assets/images/ysp.png" alt="" v-else />
              </div>
            </div>
          </div>
        </div>
        <!-- 目录列表 end -->
      </div>
    </div>
    <div class="tabsBox">
      <el-tabs v-model="activeInfo" @tab-click="infoHandleClick">
        <el-tab-pane label="信息项信息" name="xxx">
          <el-table :data="xxxmc" border style="width: 100%">
            <el-table-column prop="code" label="信息项名称">
            </el-table-column>
            <el-table-column prop="description" label="信息项表注释">
            </el-table-column>
            <el-table-column prop="dataType" label="信息项数据类型">
            </el-table-column>
          </el-table>

        </el-tab-pane>
        <el-tab-pane label="API详情" name="info">
          <div v-if="dataInfo.auth != 0">
            <div class="topInfo">
              <!--              <button class="tiaoshi" @click="tsBtn">调试</button>-->
              <div>
                接口地址：{{ apiData }}
              </div>
              <div>
                调用方式：{{ dyfs }}
              </div>
              <!-- <span>返回格式：{{  }}</span> -->
              <div>
                TOKEN： <el-popover placement="bottom" title="TOKEN：" width="800" trigger="click" :content="token"
                  style="position: relative;">
                  <el-button slot="reference" type="text"
                    style="position: absolute;left: 45px;top: -37px;">点击查看</el-button>
                </el-popover>

              </div>
            </div>
            <div class="qqcs">
              <div class="title"
                style="background: #ced4da;margin: 10px 0;padding-left: 5px;height: 33px;line-height: 33px;">请求参数</div>
              <div class="csTable">
                <el-table :data="requestParams" height="250" border style="width: 100%">
                  <el-table-column prop="code" label="英文"></el-table-column>
                  <el-table-column prop="dataType" label="类型"></el-table-column>
                  <el-table-column prop="required" label="是否必填"></el-table-column>
                  <el-table-column prop="location" label="参数位置"></el-table-column>
                  <el-table-column prop="defaultValue" label="默认值"></el-table-column>
                  <el-table-column prop="description" label="说明"></el-table-column>
                </el-table>
              </div>
            </div>
            <div class="sccs">
              <div class="title"
                style="background: #ced4da;margin: 10px 0;padding-left: 5px;height: 33px;line-height: 33px;">输出参数</div>
              <div class="csTable">
                <el-table :data="responseParams" height="250" border style="width: 100%">
                  <el-table-column prop="code" label="英文"></el-table-column>
                  <el-table-column prop="location" label="参数位置"></el-table-column>
                  <el-table-column prop="dataType" label="类型"></el-table-column>
                  <el-table-column prop="description" label="说明"></el-table-column>
                </el-table>
              </div>
            </div>

          </div>
          <p style="text-align: center; padding-top: 100px" v-else>
            请申请或审批查看API详情
          </p>
        </el-tab-pane>
        <!--        <el-tab-pane label="错误参照码" name="second">-->
        <!--          <div v-if="dataInfo.auth != 0">-->
        <!--            <el-table :data="infoItemTableErr" border style="width: 100%">-->
        <!--              <el-table-column-->
        <!--                show-overflow-tooltip-->
        <!--                prop="code"-->
        <!--                label="错误码"-->
        <!--                width="180"-->
        <!--              >-->
        <!--              </el-table-column>-->
        <!--              <el-table-column-->
        <!--                show-overflow-tooltip-->
        <!--                prop="desc"-->
        <!--                label="错误说明"-->
        <!--              >-->
        <!--              </el-table-column>-->
        <!--            </el-table>-->
        <!--          </div>-->
        <!--          <p style="text-align: center; padding-top: 100px" v-else>-->
        <!--            审批通过查看错误参照码-->
        <!--          </p>-->
        <!--        </el-tab-pane>-->
        <!--        <el-tab-pane label="示例代码" name="api">-->
        <!--          <codeExample v-if="activeInfo === 'api' && dataInfo.auth != 0" />-->
        <!--          <p style="text-align: center; padding-top: 100px" v-else>-->
        <!--            审批通过查看示例代码-->
        <!--          </p>-->
        <!--        </el-tab-pane>-->
      </el-tabs>
    </div>
    <!-- 申请弹窗 -->
    <el-dialog title="资源申请" :visible.sync="approvalDialog.show" width="1100px" append-to-body>
      <el-form :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :model="ruleForm">
        <el-form-item label="资源清单：">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column label="序号" width="180">
              <template slot-scope="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="资源名称" width="180">
            </el-table-column>
            <el-table-column prop="catalogName" label="所属分类">
            </el-table-column>
            <el-table-column prop="institutionName" label="资源提供方">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="申请描述:" prop="textarea">
          <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="ruleForm.textarea" style="width: 100%">
          </el-input>
        </el-form-item>

        <el-form-item label="文件上传:" prop="fileName">
          <div style="display: flex; justify-content: space-between">
            <el-upload :before-upload="beforeUpload" action="#" ref="upload" :file-list="fileList" :auto-upload="false"
              multiple :limit="1" :on-exceed="handleExceed" :on-change="handleFileChange">
              <el-button slot="trigger" size="small" type="primary">选择文件</el-button>
            </el-upload>
            <el-button slot="tip" size="small" type="text" @click="downloadTemplateBtn">下载模板</el-button>
          </div>
        </el-form-item>
      </el-form>
      <!-- <div class="form-title">
        <span class="not-must-write">资源清单：</span>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="序号" width="180">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="资源名称" width="180">
        </el-table-column>
        <el-table-column prop="catalogName" label="所属分类"> </el-table-column>
        <el-table-column prop="institutionName" label="资源提供方">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      </el-table>
      <br />
      <el-row :gutter="10">
        <el-col :span="2">
          <div class="form-title">
            <span class="must-write">申请描述:</span>
          </div>
        </el-col>
        <el-col :span="22">
          <el-input
            type="textarea"
            :rows="7"
            placeholder="请输入内容"
            v-model="textarea"
            style="width: 100%"
          >
          </el-input>
        </el-col>
      </el-row>
      <br />
      <div class="form-title">
        <span class="not-must-write">文件上传</span>
      </div>
      <div style="display: flex; gap: 16px">
        <el-input readonly v-model="fileName" size="small"></el-input>
        <el-upload
          action="#"
          ref="upload"
          :file-list="fileList"
          :auto-upload="false"
        >
          <el-button slot="trigger" size="small" type="primary"
            >选择文件</el-button
          >
        </el-upload>
        <el-button
          slot="tip"
          size="small"
          type="text"
          @click="downloadTemplateBtn"
          >下载模板</el-button
        >
      </div>
      <br /> -->
      <div class="dialog-bottom">
        <el-button type="primary" @click="submitBtn('ruleForm')">确认申请</el-button>
        <el-button size="small" @click="approvalDialog.show = false">取消</el-button>
      </div>
      <br />
    </el-dialog>
    <!-- 调试弹窗 -->
    <!--    <el-dialog title="调试" :visible.sync="dialogVisibleTs" width="50%" :close-on-click-modal="false"-->
    <!--      @close="handleDialogClose">-->
    <!--      <el-form label-width="80px">-->
    <!--        <el-form-item label="调用方式:">-->
    <!--          <el-radio v-model="radioPost" label="1">{{-->
    <!--            infoItemData.requestMethod-->
    <!--          }}</el-radio>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item label="输入参数:">-->
    <!--          <el-checkbox-group v-model="checkList">-->
    <!--            <div v-for="(item, index) in infoItemTableIn" :key="index" style="-->
    <!--                display: flex;-->
    <!--                justify-content: space-between;-->
    <!--                margin-right: 100px;-->
    <!--                margin-top: 10px;-->
    <!--              ">-->
    <!--              <el-checkbox :label="item.fieldName">{{-->
    <!--                item.fieldName-->
    <!--              }}</el-checkbox>-->
    <!--              <el-input style="width: 300px" v-model="inputValues[item.fieldName]"-->
    <!--                @input="handleInputChange(item.fieldName)"></el-input>-->
    <!--            </div>-->
    <!--          </el-checkbox-group>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item>-->
    <!--          <button @click.prevent="btnZx" class="zxBtn">执行</button>-->
    <!--        </el-form-item>-->
    <!--        <el-form-item>-->
    <!--          <pre class="zxBox">{{ records }}</pre>-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <span slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="dialogVisibleTsQx">取 消</el-button>-->
    <!--      </span>-->
    <!--    </el-dialog>-->
  </div>
</template>

<script>
// import { PrismEditor } from "vue-prism-editor";
// import "vue-prism-editor/dist/prismeditor.min.css";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism.css";

import axios from "axios";
// import { post } from "@/utils/api.js";
import Cookies from "js-cookie";
import codeExample from "@/components/common/codeExample.vue";
import {
  getSerResInfo,
  getUpdateCycle,
  getErrorCode,
  getUserLogin,
  getCheckFile,
  getApplys,
  getMyAppKey,
  getJkcsjk, getFieldList, getbsjxList, getApiList, getQueryparameterList, getrouter, getqueryparameter, getdetail
} from "../../utils/httpUtils";
import sqlImg from "@/assets/images/sql.png";
import apiImg from "@/assets/images/APIserve.png";
import fileImg from "@/assets/images/file.png";

export default {
  name: "dataInfo",
  components: {
    codeExample,
    // PrismEditor,
  },
  props: ["updateCycleList", "shareTypeList", "ShareModeList", "resTpye"],
  data() {
    return {
      apiNameList: [],
      xxxmc: [],
      requestParams: [],
      responseParams: [],
      token: "",
      apiData: '',
      dyfs:'',
      version: "",
      apiId: "",
      records: null,
      radioPost: "1",
      checkList: [],
      inputValues: {},
      // dialogVisibleTs: false,
      ruleForm: {
        textarea: "",
      },
      rules: {
        textarea: [
          { required: true, message: "请输入申请描述", trigger: "blur" },
        ],
      },
      tableData: [],
      fileName: "",
      fileList: [],
      approvalDialog: {
        show: false,
      },
      activeInfo: "info",
      activeNames: ["1"],
      dataInfo: {},
      code: "",
      zyflInfoInfo: {},
      name: "",
      infoItemData: {},
      infoItemTableIn: [],
      infoItemTableOut: [],
      infoItemTableErr: [],
      resTypeList: [
        {
          code: 0,
          name: "数据资源",
        },
        {
          code: 1,
          name: "服务资源",
        },
      ],
      hasLogin: Cookies.get("userInfo"),
      accessKey: "",
    };
  },
  mounted() {
    this.$bus.$on("busInfo", (data) => {
      console.log(data, "data");
      this.zyflInfoInfo = data
      this.$nextTick(() => {
        this.getDataInfo(data);
      });
    });
    this.$bus.$on("initxxx", () => {
            this.initxxx();
        });
  },
  destroyed() {
    this.$bus.$off("busInfo");
  },
  computed: {
    isButtonDisabled() {
      return this.infoList.every((item) => !item.isAct);
    },
  },
  methods: {
    initxxx(){
            this.actName = 'xxx'
            console.log(this.actName, 'actName');
        },
    highlighter(code) {
      return highlight(this.infoItemData.resultExampleData, languages.js);
    },
    handleFileChange(file, fileList) {
      this.fileList = [];
      // 进行文件大小校验
      const isLt500K = file.size / 1024 < 500;
      if (!isLt500K) {
        this.$message.error("上传文件大小不能超过500KB！");
        return;
      }
      this.fileList = [file]; // 这里只添加当前选择的文件
    },
    beforeUpload(file) {
      const isLt500K = file.size / 1024 < 500;
      if (!isLt500K) {
        this.$message.error("上传文件大小不能超过500KB！");
        return false; // 返回 false 以阻止文件上传到服务器
      }
      return true; // 返回 true 以允许文件上传到服务器
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择${files.length}个文件`);
    },

    handleDialogClose() {
      this.checkList = [];
      this.inputValues = {};
      this.records = null;
    },
    // dialogVisibleTsQx() {
    //   this.dialogVisibleTs = false;
    //   this.checkList = [];
    //   this.inputValues = {};
    //   this.records = null;
    // },
    handleInputChange(fieldName) {
      // 处理输入变化的逻辑（如果有的话）
      // console.log(
      //   `Input changed for ${fieldName}:`,
      //   this.inputValues[fieldName]
      // );
    },
    // btnZx() {
    //   console.log("点击执行了");
    //   if (this.checkList.length == 0) {
    //     this.$message.error("请勾选输入参数");
    //   } else {
    //     const selectedValues = this.checkList.reduce((acc, fieldName) => {
    //       if (this.inputValues[fieldName] !== undefined) {
    //         acc[fieldName] = this.inputValues[fieldName];
    //       }
    //       return acc;
    //     }, {});
    //     console.log(this.infoItemData.requestPath, "接口地址");
    //     const fullUrl = this.infoItemData.requestPath;
    //     const regex = /\/api-external\/(.*)/;
    //     const match = fullUrl.match(regex);
    //
    //     if (match && match.length > 1) {
    //       const partialUrl = match[1]; // 匹配到的第一个分组，即/api-external/后面的部分
    //       console.log(partialUrl, "输出地址"); // 输出: api/rsj/cjsybx/jbxx
    //
    //       getJkcsjk(
    //         partialUrl,
    //         {
    //           access_token: this.accessKey,
    //           ...selectedValues, // 使用扩展运算符直接展开selectedValues对象
    //         },
    //         60000
    //       )
    //         .then((res) => {
    //           console.log(res, "执行");
    //           this.records = res;
    //         })
    //         .catch((err) => {
    //           this.$message.error("参数错误");
    //         });
    //     }
    //   }
    // },
    // tsBtn() {
    //   this.dialogVisibleTs = true;
    //   this.getAccessKey();
    // },
    // 确认申请
    submitBtn(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 创建FormData实例
          const formData = new FormData();
          // 遍历fileList，将文件添加到formData中
          this.fileList.forEach((file) => {
            formData.append("file", file.raw);
          });
          formData.append("codes", this.code);
          formData.append("description", this.ruleForm.textarea);
          getApplys(formData).then((res) => {
            console.log(res, "申请提交");
            if (res.code == "000000") {
              this.$message({
                message:
                  "您的申请已提交成功，待审核，查看进度进入个人中心-我的申请",
                type: "success",
              });
              this.approvalDialog.show = false;
              this.ruleForm.textarea = "";
            }
          });
        }
      });
    },
    // 下载模版
    downloadTemplateBtn() {
      getCheckFile({ type: 0 }).then((res) => {
        console.log(res, "下载模版");
        if (res.code == "000000") {
          this.$message({
            message: "无可用模板，请联系提供方",
            type: "warning",
          });
        }
      });
    },
    approvalBtnClick() {
      this.approvalDialog = {
        show: true,
      };
    },
    infoHandleClick() { },
    getTypeList() {
      //获取更新频率字段
      getUpdateCycle("updateCycle").then((res) => {
        if (res) {
          this.updateCycleList = res.data;
        }
      });
      // 获取共享类型字段
      getUpdateCycle("shareType").then((res) => {
        if (res) {
          this.shareTypeList = res.data;
        }
      });
      // 获取共享方式字段
      getUpdateCycle("ShareMode").then((res) => {
        if (res) {
          this.ShareModeList = res.data;
        }
      });
    },
    // 获取列表数据
    getDataInfo(val) {
      console.log(val, "val2");
      let params = {
        bmId: val.id,
        uuid: val.apiId,
        onlineVersion: val.version,
      }
      getqueryparameter(params).then((res) => {
        console.log(res, "查询参数");
        this.requestParams = res.requestParams;
        this.responseParams = res.responseParams;
        this.apiData = res.path
        this.dyfs = res.type
      })
      getMyAppKey().then((res) => {
        console.log(res,'--=')
        this.token =  res.appKey
      });

      getdetail(params).then((res) => {
        console.log(res, "路由2");
        // this.apiData = res
        if (res.api_fieldlist) {
          this.xxxmc = res.api_fieldlist
        }
      })


    },
    // 格式化数据
    // initInfo(val, type) {
    //   if (val && type === "updateCycle") {
    //     let isHas = this.updateCycleList.find((item) => {
    //       return item.code == val;
    //     });
    //     if (isHas) {
    //       return isHas.name;
    //     }
    //   } else if (val === 0 || (val && type === "shareType")) {
    //     let isHas = this.shareTypeList.find((item) => {
    //       return item.code == val;
    //     });
    //     if (isHas) {
    //       return isHas.name;
    //     }
    //   } else if (val && type === "resourceType") {
    //     let isHas = this.resTypeList.find((item) => {
    //       return item.code == val;
    //     });
    //     if (isHas) {
    //       return isHas.name;
    //     }
    //   } else if (val && type === "ShareMode") {
    //     let arr = val.split(",");
    //     let arrTemp = [];
    //     for (let i = 0; i < arr.length; i++) {
    //       let isHas = this.ShareModeList.find((item) => {
    //         return item.code == arr[i];
    //       });
    //       if (isHas) {
    //         arrTemp.push({
    //           code: isHas.code,
    //           name: isHas.name,
    //           src:
    //             isHas.code == 0
    //               ? sqlImg
    //               : isHas.code == 1
    //               ? fileImg
    //               : isHas.code == 2
    //               ? apiImg
    //               : "",
    //         });
    //       }
    //     }
    //     return arrTemp;
    //   }
    // },
    getAccessKey() {
      if (this.accessKey) return;
      getUserLogin().then((res) => {
        console.log(res, "key");
        if (res.code === "000000") {
          this.accessKey = res.data.accessKey;
        }
      });
    },
  },
  computed: {
    requestExample() {
      return `${this.infoItemData.requestPath}?${this.infoItemTableIn
        .map((item, index) => (index ? "&" : "") + item.fieldName + "=")
        .join("")}&access_token=您申请的APPKEY`;
    },
  },
};
</script>

<style scoped>
.zxBtn {
  width: 50px;
  height: 26px;
  background: transparent;
  border-color: #204dac;
  line-height: 1.2;
  float: right;
}

.zxBox {
  background-color: #f1f3f4;
  border-radius: 6px;
  padding: 10px;
  min-height: 100px;
  max-height: 300px;
  overflow: auto;
}

.tiaoshi {
  width: 65px;
  height: 32px;
  float: right;
  background: #204dac;
  border-color: #204dac;
  color: #fff;
  border: none;
}

.dialog-bottom {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.form-title {
  margin: 12px 0;
  border-left: 4px solid #198ef8;
  height: 22px;
  line-height: 22px;
  font-size: 14px;
  box-sizing: border-box;
}

.not-must-write {
  margin-left: 10px;
}

.must-write {
  position: relative;
  margin-left: 16px;
}

.must-write::before {
  position: absolute;
  content: "*";
  left: -10px;
  color: red;
}

.imageBox {
  margin-top: 23px;
}

.t4_qb {
  width: 70px;
  padding: 5px;
  background: #198ef8;
  float: left;
  text-align: center;
  cursor: pointer;
}

.t4_qb a {
  color: #fff;
}

.t4_border {
  border-left: none;
  border-right: none;
}

.t4_sjCons .t2_sjCons_list {
  border-bottom: none;
}

.t4_search ul li:hover {
  background: rgba(255, 255, 255, 0.1);
}

.lTop-box {
  padding: 0 0 15px;
  background-color: #f7f8fa;
}

.lTop-box .proList {
  padding: 15px 30px;
  background-color: #fff;
  border-bottom: 4px solid #198ef8;
  display: flex;
  flex-direction: row;
}

.lTop-box .proList .tit {
  width: 85px;
  padding: 5px 0;
}

.lTop-box .proList ul {
  flex: 1;
  padding: 0;
  margin: 0;
}

.lTop-box .proList ul li {
  float: left;
  text-align: center;
  padding: 5px 10px;
  height: 30px;
  width: 18.5%;
  margin: 0 5px;
  background-color: #f8f8f8;
  cursor: pointer;
}

.lTop-box .proList ul li.proAct {
  background-color: #f1f8ff;
  color: #204dac;
}

.listToggle {
  padding: 13px 20px;
}

.listToggle span {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

#pageDiv {
  text-align: center;
  padding: 20px;
}

#pageDiv /deep/ .el-select__caret {
  width: auto;
  height: auto;
}

#pageDiv /deep/ .el-pagination__jump {
  color: #606266;
  margin: 0;
}

.gxfs img {
  width: 20px;
}

.zyInfoBox {
  display: flex;
  flex-direction: row;
}

.zyInfoBox .zyInfo {
  flex: 1;
  margin-left: 8px;
  font-size: 13px;
}

.zyInfoBox .zyInfo .infoItem_box {
  display: flex;
  flex-direction: row;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem {
  flex: 1;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem>div {
  margin-top: 8px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox,
.el-table .imgBox {
  display: inline-block;
  margin-right: 5px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img.sqlImg,
.el-table .imgBox img.sqlImg {
  width: 18px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img,
.el-table .imgBox img {
  width: 22px;
}

.tabsBox {
  padding: 15px 10px;
}

.tabsBox .topInfo span {
  display: block;
  margin: 8px 15px;
  font-size: 16px;
}

.el-collapse /deep/ .el-collapse-item__header {
  background: #dfdfdf;
  padding-left: 20px;
  font-size: 16px;
}

h2.titBox {
  position: relative;
}

h2.titBox .sqBtn {
  position: absolute;
  right: 0;
  top: 0;
}

.my-editor {
  background: #f9fafa;
  color: #000;

  font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
  font-size: 16px;
  line-height: 1.5;
  padding: 5px;
  font-weight: 500;
}

.my-editor /deep/ .prism-editor__textarea::selection {
  background-color: #cce2ff !important;
  color: #000 !important;
  user-select: none;
}

.my-editor /deep/ .prism-editor__textarea:focus {
  border: 0px solid #007bff;
  outline: none;
}

.my-editor /deep/ .prism-editor__line-numbers {
  padding-right: 10px;
}
</style>
